<!-- 顶部导航栏搜索页面 -->
<template>
	<view class="search">
		<view class="search__header flex">
			<image src="/static/back--black.png" mode="aspectFill" class="search__header-back"></image>
			<view class="search__header-input-box flex">
				<image src="/static/search--grey.png" mode="aspectFill" class="search__header-input-icon"></image>
				<input type="text" class="search__header-input" v-model="inputValue"/>
			</view>
			<view class="search__header-btn" @click="onClickSearch"
			:class="{'search__header-btn--active':isSearch}"
			>搜索</view>
		</view>
		
		<!-- 关键词搜索 -->
		<view class="search__keywords" v-if="!isSearch">
			<text class="search__keywords-title">指定搜索</text>
			<view class="search__keywords-items flex">
				<view class="search__keywords-item"
				v-for="item in keyWordItems"
				:key="item.id"
				@click="onClickGetKeyword(item.keyword)"
				>
					{{item.keyword}}
				</view>
			</view>
		</view>
		
		<!-- 搜索后的结果 -->
		<view class="search__items" v-else>
			<search-item></search-item>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import searchItem from '@/components/searchItem/searchItem.vue'

	const inputValue = ref('搜索全部');
	
	// 判断是否搜索
	const isSearch = ref(false);
	
	const keyWordItems = ref([
		{keyword:'服务机构',id:'keyword01'},
		{keyword:'资讯',id:'keyword02'},
		{keyword:'赛事',id:'keyword03'},
		{keyword:'活动',id:'keyword04'},
		{keyword:'赛事排行榜',id:'keyword05'},
		{keyword:'培训',id:'keyword06'},
		{keyword:'课程',id:'keyword07'},
		{keyword:'直播',id:'keyword08'},
		{keyword:'视频',id:'keyword09'},
		{keyword:'动动员️',id:'keyword10'},
		{keyword:'商城',id:'keyword11'},
		{keyword:'动动群',id:'keyword12'}
	])
	
	// 点击搜索
	function onClickSearch(){
		isSearch.value = true;
		console.log('点击搜索，搜索词为：',inputValue.value);
	}
	
	// 点击得到关键词
	function onClickGetKeyword(keyword){
		console.log('点击得到关键词:',keyword);
		inputValue.value = keyword;
		// 然后直接搜索
		onClickSearch();
		
	}
</script>

<style lang="scss" scoped>
	.flex{
		display:flex;
		align-items: center;
	}
	
	button{
		margin: 0;
		padding: 0;
		line-height: 0;
	}
	
	
	.search{
		width: 100%;
		height: 100%;
		// 头部
		&__header{
			width: 100%;
			height: 80rpx;
			margin: 20rpx 0;
			box-sizing: border-box;
			padding: 0 40rpx;
			&-back{
				width: 96rpx;
				height: 96rpx;
				margin-right: 20rpx;
			}
			
			&-input-box{
				height: 100%;
				background-color: #f7f7f9;
				border-top-left-radius: 5px;
				border-bottom-left-radius: 5px;
			}
			
			&-input-icon{
				width: 48rpx;
				height: 48rpx;
				margin: 0 20rpx;
			}
			
			&-input{
				width: 430rpx;
			}
			
			&-btn{
				font-size: 32rpx;
				color: #909090;
				background-color: #ededed;
				border-top-right-radius: 5px;
				border-bottom-right-radius: 5px;
				width: 200rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				// padding: 0 .3em;
				
				&--active{
					color: #f4c083;
				}
			}
		}
		
		// 关键词
		&__keywords{
			width: 100%;
			height: 100%;
			// margin: 0 auto;
			box-sizing: border-box;
			padding: 0 30rpx;
			padding-top: 40rpx;
			background-color: #f7f7f9;
			
			&-title{
				display: block;
				color: #4d4d4f;
				margin-bottom: 40rpx;
				font-size: 32rpx;
			}
			
			&-items{
				flex-wrap: wrap;
			}
			
			&-item{
				width: 140rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				border: 1px solid #c8c8ca;
				border-radius: 5px;
				flex-shrink: 0;
				margin-right: 40rpx;
				margin-bottom: 40rpx;
				font-size: 28rpx;
				&:nth-child(4n){
					margin-right: 0;
				}
			}
		}
	}
</style>